<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入element-ui样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<style>
		</style>
	</head>
	<body>
		<div id="prescription">
			<h2>项目检查清单</h2>
			<el-row>
				<el-col :span="7">
					<el-form ref="form" label-width="80px">
						<el-form-item label="身份证件">
							<el-input v-model="patinForm.patientIdCard" @blur="findUserInfo" placeholder="请输入身份证" style="width: 200px;"></el-input>
						</el-form-item>
						<el-form-item label="姓名">
							<el-input v-model="patinForm.patientName" :disabled="true" style="width: 150px;"></el-input>
						</el-form-item>
						<el-form-item label="性别">
							<el-input v-model="patinForm.patientSex" :disabled="true" style="width: 150px;"></el-input>
						</el-form-item>
						<el-form-item label="年龄">
							<el-input v-model="patinForm.patientAge" :disabled="true" style="width: 150px;"></el-input>
						</el-form-item>
						
						<el-form-item label="检查类别">
							<el-select v-model="projectType.projectTypeId" placeholder="请选择检查类别" @change="getProjectInfo">
								<el-option :label="p.projectName" :value="p.projectTypeId" v-for="p in projectTypes"></el-option>
							</el-select>
						</el-form-item>
						<template>
							<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" v-show="showProject" @change="handleCheckAllChange">全选</el-checkbox>
							<div style="margin: 15px 0;"></div>
							<el-checkbox-group v-model="checkedProject" @change="handlecheckedProjectChange">
								<el-checkbox v-for="p in project" :label="p" :key="p">{{p}}</el-checkbox>
							</el-checkbox-group>
						</template>
						
						<el-button type="success" @click="insertProject">确认提交</el-button>
					</el-form>
				</el-col>
		</div>


		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>

		<script>
			var app = new Vue({
				el: "#prescription",
				data: {
					showProject:false,
					checkAll: false,
					checkedProject: [], //被勾选的属性会在这个地方
					project: [],
					isIndeterminate: true,
					patinForm: {
						patientIdCard: "",
						patientName: "",
						patientSex: "",
						patientAge: "",
					},
					projectTypes: [],
					projectInfos: [],
					projectType: {
						projectTypeId: "",
						projectName: "",
					},
					projectInfo: {
						projectInfoId: "",
						projectName: "",
						projectPrice: "",
						projectCheckAddress: "",
						projectTypeId: "",
					}
				},
				created() {
					var t = this;
					axios.get('http://192.168.80.13:8080/medical/project-type/selectProjectTypes', {
						params: {}
					}).then(function(data) {
						t.projectTypes = data.data.data
					}).catch(function(Error) {
						console.log(Error)
					})

				},
				methods: {
					// 根据身份证查询患者基本信息
					findUserInfo: function() {
						var t = this;
						axios.get('http://192.168.80.13:8080/medical/patient/selectPatientByIdCard', {
							params: {
								idCard: t.patinForm.patientIdCard
							}
						}).then(function(data) {
							if (data.data.success) {
								var d = data.data.data;
								var tp = t.patinForm
								var tc = t.caseForm
								//判断返回的结果
								if (data.data.data == null) {
									alert("请输入正确的身份证件")
									return;
								}
								// 给patinForm表单中的数据赋值
								tp.patientName = d.patientName;
								tp.patientSex = d.patientSex;
								tp.patientAge = d.patientAge;

							}
						}).catch(function(Error) {
							console.log(Error)
						})
					},
					//根据选中的检查类别，列出对应的小类别
					getProjectInfo: function() {
						this.showProject = true;
						var t = this;
						axios.get('http://192.168.80.9:8080/medical/project-info/selectProjectInfoByTypeId', {
							params: {
								id: t.projectType.projectTypeId
							}
						}).then(function(data) {
							if (data.data.success) {
								let d = data.data.data;
								t.projectInfos =d;
								t.project=[];
								for(let i =0;i<d.length;i++){
									let projectName = d[i].projectName;
									let projectInfoId = d[i].projectInfoId;
									t.project.push(projectName);
								}
							}
						}).catch(function(Error) {
							console.log(Error)
						})
					},

					handleCheckAllChange(val) {
						this.checkedProject = val ? this.project : [];
						this.isIndeterminate = false;
					},
					handlecheckedProjectChange(value) {
						let checkedCount = value.length;
						this.checkAll = checkedCount === this.project.length;
						this.isIndeterminate = checkedCount > 0 && checkedCount < this.project.length;
					},
					insertProject:function(){
						if(this.patinForm.patientIdCard==""){
							alert("请输入正确的身份证件哦~")
							return;
						}
						if(this.checkedProject.length==0){
							alert("请选择需要检查的项目")
							return;
						}
						let t = this;
						let aa = "";
						for(let i = 0;i<t.checkedProject.length;i++){
							if(i == t.checkedProject.length-1){
								aa+=t.checkedProject[i]
								break;
							}
							aa+=t.checkedProject[i]+" | "
						}
						axios.get('http://192.168.80.9:8080/medical/check-apply/insertCheckApply',{
							params:{
								checkedProject:aa,
								patientIdCard:t.patinForm.patientIdCard,
							}
						}).then(function(data){
							if(data.data.success){
								alert("提交成功！")
								
								//将数据清空
								t.patinForm.patientIdCard="";
								t.patinForm.patientName="";
								t.patinForm.patientSex="";
								t.patinForm.patientAge="";
								
								t.projectType.projectTypeId="";
								
								t.project = [];
								t.showProject=false;
							}
						}).catch(function(Error){
							console.log(Error)
						})

						
					}


				},

			})
		</script>


	</body>
</html>
